<template>
    <div class="warpper-box">
      <form-create 
        v-model="params.fApi" 
        :rule="params.rule" 
        :option="params.option" 
        @btn-search-click="loadTable(true)"
        @btn-reset-click="reset"/>
      <a-table :columns="table.columns" :pagination="table.pagination" @change="handleTableChange" rowKey="id" :data-source="table.loadData">
        <span slot="idCardFront" slot-scope="text, record">
            <template v-if="record.idCardFront">
               <viewer :images = "[record.idCardFront,record.idCardReverse]">
                <img :src="record.idCardFront" style="width:50px;height:50px;margin-right:4px;">
                <img :src="record.idCardReverse" style="width:50px;height:50px">
               </viewer>
            </template>
            <template v-else>--</template>
        </span>
        <span slot="idCard" slot-scope="text, record">
          <a-popover title="身份证号" trigger="hover">
              <template #content>
              <p style="margin: 0;">{{record.idCard}}</p>
              </template>
              <a-button style="padding: 0;color:#000" type="link">{{record.idCard | filterMore(10)}}</a-button>
          </a-popover>
        </span>
      </a-table>

       <a-drawer
      :width="900"
      title="实名认证信息"
      placement="right"
      :visible="visible"
      @close="visible=false">
        <detail-list :col="1">
            <detail-list-item term="姓名">{{detail.name}}</detail-list-item>
            <detail-list-item term="手机号">{{detail.mobile}}</detail-list-item>
            <detail-list-item term="身份证号">{{detail.idCard}}</detail-list-item>
        </detail-list>
        <detail-list :col="2">
            <detail-list-item term="身份证正面">
              <viewer :images = "[detail.fonts]">
              <img :src="detail.fonts" alt="无图片" style="width: 80px;height:80px;" />
            </viewer>
            </detail-list-item>
            <detail-list-item term="身份证反面">
              <viewer :images = "[detail.fontx]">
              <img :src="detail.fontx" alt="无图片" style="width: 80px;height:80px;" />
            </viewer>
            </detail-list-item>
        </detail-list>
        <detail-list :col="1">
            <detail-list-item term="活体人像照片">
              <viewer :images = "[detail.invoiceUrl]">
              <img :src="detail.invoiceUrl" alt="无图片" style="width: 80px;height:80px;" />
            </viewer>
                </detail-list-item>
        </detail-list>
      </a-drawer>

    </div>
</template>

<script>
import {
  PARAMS_WECHAT_USER,
  COLUMNS_WECHAT_USER,
  OPTION_BLOCK,
  OPTION_INLINE
} from './form'
import {wechatUserList} from '@/api/manage/wechatUser'
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item
export default {
  name: 'weChat',
  components: {
    DetailList,
    DetailListItem
  },
  data () {
    return {
      params:{
        fApi:{},
        rule:PARAMS_WECHAT_USER,
        option:OPTION_INLINE
      },
      table:{
          columns:COLUMNS_WECHAT_USER,
          loadData:[],
          pagination:{
            pageNum:1,
            pageSize: 10,
            total:0,
            showSizeChanger: true,
					showQuickJumper: true,
            pageSizeOptions: ["10", "20", "50", "100"],
            showTotal: total => `共有 ${total} 条数据`,
          }
        },
        visible:false,
        detail:{
          name:'',
          mobile:'',
          idCard:'',
          fonts:'',
          fontx:'',
          invoiceUrl:''
        }
    }
  },
  filters: {
      filterMore (value,num) {
      if (!value) return ''
      if (value.length > num) {
          return value.slice(0,num) + '...'
      }
      return value
      }
  },
   mounted () {
    this.loadTable(true);
  },
  methods: {
    async loadTable(flag){
      let params = {};
      if(JSON.stringify(this.params.fApi) !== "{}"){
        const formData = this.params.fApi.formData();
        params.name = formData.name;
        params.authentication = formData.authentication;
        params.startTime = formData.day[0];
        params.endTime = formData.day[1];
      }
      if(flag){
        this.table.pagination.pageNum = 1;
        this.table.pagination.pageSize = 10;
      }
      params.pageNum = this.table.pagination.pageNum;
      params.pageSize = this.table.pagination.pageSize;
      const {code,data} = await wechatUserList(params);
      if(code ==='1'){
        this.table.loadData = data.content;
        this.table.loadData.forEach(v=>{
          v.idCardFront = v.idCardFront ? v.idCardFront.split(','):[]
        })
        this.table.pagination.total = data.total || 0;
      }
    },
    handleTableChange(pagination){
      this.table.pagination.pageNum = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    userDetail(rows){
      this.visible = true;
    },
    reset(){
      this.params.fApi.resetFields();
      this.loadTable(true);
    }
  }
}
</script>
